import "./index.css"
let messageList,isLoad=false,loadList=[]
window.addEventListener("load",init)
export function Message(info){
	asyncCreateMessage(info)
}
function asyncCreateMessage(info){
	const param=getInfo(info)
	if(isLoad){
		createMessage(param)
	}else{
		loadList.push(param)
	}
}
const defaultTime=2000
function getInfo(info){
	//传入可以是字符串 也可以是类
	const infoObj={
		title:"",
		html:false,
		type:"info",
		time:defaultTime,
		close:false,
	}
	if(typeof info==="string"||typeof info==="number"){
		infoObj.title=info
	}else{
		Object.assign(infoObj,info)
	}
	return infoObj
}
const funs=[
	"info",
	"error",
	"warn",
	"succeed",
	"success"
]
funs.forEach(key => {
	Message[key]=function(str){
		asyncCreateMessage({
			title:str,
			type:key,
			time:defaultTime,
			close:false,
		})
	}
});
export function createMessage(info){
	const time=info.time
	try{
		const messageDiv=document.createElement("div")
		const messageDivBox=document.createElement("div")
		if(info.html){
			// messageDiv.innerHTML=info.html
			messageDiv.innerHTML=info.title
		}else{
			messageDiv.textContent=info.title||info.message
		}
		messageDiv.classList.add("zijid_message")
		messageDiv.classList.add("zijid_message_"+info.type)

		messageDivBox.className="zijid_message_div"

		

		if(info.close){
			const messageDivXBox=document.createElement("div")
			const x=document.createElement("div")
			// x.innerHTML="x"
			x.className="zijid_x"
	
			messageDivXBox.className="zijid_x_box"
			messageDivXBox.append()
			
			messageDivXBox.append(x)
			messageDiv.append(messageDivXBox)
			x.onclick=rome
		}
		messageDivBox.append(messageDiv)
		messageList.append(messageDivBox)
		let t=setTimeout(()=>{
			messageDiv.classList.add("zijid_message_stop")
			setTimeout(rome,300)
		},time)
		function mouseover(){
			clearTimeout(t)
			t=null
		}
		function mouseout(){
			t=setTimeout(()=>{
				messageDiv.classList.add("zijid_message_stop")
				setTimeout(rome,300)
			},time)
		}
		function rome(){
			if(t){
				clearTimeout(t)
				t=null
			}
			messageList.removeChild(messageDivBox)
		}
		messageDiv.onmouseover=mouseover//鼠标移入
		messageDiv.onmouseout=mouseout//鼠标移除
	}catch(err){
		console.error("err:",err);
		// init()
		// message()
	}
}
function init(){
	isLoad=true
	if(!messageList){
		getList()
	}
	loadList.forEach(i=>{
		createMessage(i)
	})
}
function getList(){
	const list=document.querySelector(".zijid_messageList")
	if(list){
		messageList=list
	}else{
		messageList=document.createElement("div")
		messageList.className="zijid_messageList"
		document.body.append(messageList)
	}
}